<template>
  <!-- 行业信息 -->
  <view class="industryInformation">
    <view class="content" :style="{ background: dataFlag == '' ? '#fff' : '' }">
      <view class="content-item">
        <block v-if="dataFlag != ''">
          <u-cell
            :titleStyle="titleStyle"
            title="旅馆星级"
            clickable
            isLink
            :rightIconStyle="rightIconStyle"
            @click="cellClick('text', 'starRating')"
          >
            <view
              slot="value"
              :class="form.starRatingDesc ? 'cell-noEmpty' : 'cell-empty'"
            >
              {{ form.starRatingDesc || "请选择" }}
            </view>
          </u-cell>

          <u-cell :titleStyle="titleStyle" title="旅馆房间数">
            <u-input
              v-model="form.roomCount"
              data-type="workPerson"
              placeholder="请输入"
              slot="value"
              fontSize="14"
              placeholderClass="placeholderClass"
              inputAlign="right"
              border="none"
              :maxlength="3"
              :required="true"
              :readonly="dataFlag == 3 ? true : false"
              @blur="roomCountBlur"
            ></u-input>
          </u-cell>

          <u-cell :titleStyle="titleStyle" title="旅馆床位数">
            <u-input
              v-model="form.bedCount"
              data-type="workPerson"
              placeholder="请输入"
              slot="value"
              fontSize="14"
              placeholderClass="placeholderClass"
              inputAlign="right"
              border="none"
              :maxlength="3"
              :required="true"
              :readonly="dataFlag == 3 ? true : false"
              @blur="bedCountBlur"
            ></u-input>
          </u-cell>
          <!--           
          <u-cell :titleStyle="titleStyle" title="消防栓数量">
            <u-input
              v-model="form.fireHydrantCount"
              data-type="workPerson"
              placeholder="请输入"
              slot="value"
              fontSize="14"
              placeholderClass="placeholderClass"
              inputAlign="right"
              border="none"
              :maxlength="3"
              :required="true"
              @blur="connumBlur"
            ></u-input>
          </u-cell> -->

          <u-cell
            :titleStyle="titleStyle"
            title="房客信息录入系统"
            clickable
            isLink
            :rightIconStyle="rightIconStyle"
            @click="cellClick('text', 'inputSystem')"
          >
            <view
              slot="value"
              :class="form.inputSystemDesc ? 'cell-noEmpty' : 'cell-empty'"
            >
              {{ form.inputSystemDesc || "请选择" }}
            </view>
          </u-cell>

          <block v-if="industryList.length">
            <view
              v-for="(item, i) in industryList"
              :key="i"
              class="nape-item"
              :style="{
                borderBottom: i + 1 != item.length ? '1px solid #e6e6e6' : '',
              }"
            >
              <view class="nape-left">
                <image
                  :src="baseImgUrl + 'dele-icon.png'"
                  class="deleClass"
                  @click="deleteHandle(i)"
                  mode="aspectFill"
                  v-if="dataFlag != 3"
                ></image>
                <image
                  :src="imgPrefix + item.deviceImage"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="wrapper-facility" style="margin: 30rpx 0 0 20rpx">
                <view class="facility-item">
                  <view class="textAlign label">设施名称：</view>
                  <view class="value valueName">
                    {{ item.deviceName || "" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">设备数量：</view>
                  <view class="value valueName">
                    {{ item.deviceCount || "" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">添加时间：</view>
                  <view class="value valueName">
                    {{ item.addTimeDesc || "" }}
                  </view>
                </view>
              </view>
            </view>
          </block>

          <block v-if="dataFlag != 3">
            <u-gap height="10" bgColor="#F9F9F9"></u-gap>
            <view class="addFile" @click="addFacility">
              + 添加其他设施信息
            </view>
          </block>
        </block>
        <block v-else>
          <u-empty
            mode="list"
            text="您还没有上传旅馆业特色信息"
            :icon="baseImgUrl + 'no-icon4.png'"
          >
          </u-empty>
        </block>
      </view>
    </view>

    <view class="btns">
      <block v-if="dataFlag == 1 || dataFlag == 2">
        <button
          class="reset-btn lt cancelBtn"
          type="primary"
          @click="cancelHandle"
        >
          取消
        </button>
        <button class="submit-btn" type="primary" @click="submitHandle">
          保存
        </button>
      </block>
      <button
        v-if="dataFlag == 3"
        class="lookbtn"
        type="primary"
        @click="dataFlag = 2"
        style="width: 100%"
      >
        修改
      </button>
      <button
        v-if="dataFlag == ''"
        class="submit-btn"
        type="primary"
        @click="dataFlag = 1"
        style="width: 100%"
      >
        添加行业特色信息
      </button>
    </view>

    <u-picker
      v-if="pickerShow"
      :show="pickerShow"
      :columns="columns"
      :keyName="keyName"
      @confirm="showConfirm"
      @close="pickerClose"
      @cancel="pickerCancel"
      :closeOnClickOverlay="true"
    ></u-picker>
  </view>
</template>

<script>
import { featuresInfoDetail, featuresInfoSave } from "@/api/home.js";
import {
  handleClickRouter,
  Toast,
  navBack,
  uniTrim,
  isNumberTwo,
  ifUndefined,
  formatters,
  dayTurnTime,
} from "@/utils/util.js";
import { findEnableDictItemsbyCode } from "@/api/api.js";
import mixin from "@/utils/mixin.js";

export default {
  name: "industryInformation",
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      form: {},
      errorType: ["none"],
      options: {},
      industryList: [],
      dataFlag: "", // 1:添加  2编辑  3修改
    };
  },
  onLoad(options) {
    this.options = options;
    this.getList();
  },
  onShow() {
    this.industryList = uni.getStorageSync("industryList") || [];
  },
  methods: {
    handleClickRouter,
    /* cell 点击 */
    cellClick(name, type) {
      if (this.dataFlag == 3) return false;
      this.keyName = name;
      this.cellType = type;
      let code = "";
      switch (this.cellType) {
        case "starRating":
          code = "star_rating_type";
          break;
        case "inputSystem":
          code = "on_type";
          break;
        default:
          break;
      }

      findEnableDictItemsbyCode(code).then((res) => {
        this.columns[0] = res.result || [];
        this.pickerShow = true;
      });
    },
    /* 选择器 确定 */
    showConfirm(e) {
      let arr = e.value;
      if (arr.length) {
        let obj = arr[0];
        switch (this.cellType) {
          case "starRating":
            this.form.starRating = obj.value;
            this.form.starRatingDesc = obj.title;
            break;
          case "inputSystem":
            this.form.inputSystem = obj.value;
            this.form.inputSystemDesc = obj.title;
            break;
          default:
            break;
        }
      }
      this.pickerShow = false;
    },
    roomCountBlur() {
      let { roomCount } = this.form;
      if (roomCount && !isNumberTwo(roomCount)) {
        Toast("旅馆房间数请输入正整数");
        return;
      }
    },
    bedCountBlur() {
      let { bedCount } = this.form;
      if (bedCount && !isNumberTwo(bedCount)) {
        Toast("旅馆床位数请输入正整数");
        return;
      }
    },
    addFacility() {
      uni.setStorageSync("industryList", this.industryList);
      uni.navigateTo({
        url: "/industryInformation/addFacilities/addFacilities",
      });
    },
    // 删除
    deleteHandle(i) {
      this.industryList.splice(i, 1);
      uni.setStorageSync("industryList", this.industryList); // 其他设施信息
    },
    cancelHandle() {
      if (this.dataFlag == 1) {
        uni.removeStorageSync("industryList");
        navBack();
      } else if (this.dataFlag == 2) {
        this.getList(1);
        this.dataFlag = 3;
      }
    },
    submitHandle() {
      let { starRating, roomCount, bedCount, inputSystem } = this.form;
      if (!starRating) {
        Toast("请选择旅馆星级");
        return;
      }

      if (!roomCount || !uniTrim(roomCount)) {
        Toast("请输入旅馆房间数");
        return;
      }

      if (!isNumberTwo(roomCount)) {
        Toast("旅馆房间数请输入正整数");
        return;
      }

      if (!bedCount || !uniTrim(bedCount)) {
        Toast("请输入旅馆床位数");
        return;
      }

      if (!isNumberTwo(bedCount)) {
        Toast("旅馆床位数请输入正整数");
        return;
      }

      if (ifUndefined(inputSystem)) {
        Toast("请选择房客信息录入系统");
        return;
      }

      let data = {
        companyMessageId: this.options.companyMessageId,
        hotelFeaturesInfo: {
          starRating: starRating,
          roomCount: roomCount,
          bedCount: bedCount,
          inputSystem: inputSystem,
        },
        hotelDeviceDetailList: this.industryList,
      };

      featuresInfoSave(data).then((res) => {
        if (res.code == 200) {
          Toast("保存成功");
          navBack();
          return;
        }
        Toast(res.message);
      });
    },
    getList(num = 0) {
      featuresInfoDetail({ companyId: this.options.companyMessageId }).then(
        (res) => {
          let { code, result } = res;
          if (code == 200) {
            if (result.hotelFeaturesInfo) {
              this.dataFlag = 3;
              this.form = { ...this.form, ...result.hotelFeaturesInfo };

              let { star_rating_type, on_type } = uni.getStorageSync("allCode");
              star_rating_type.map((v) => {
                if (v.value == this.form.starRating) {
                  this.form.starRatingDesc = v.text;
                }
              });
              on_type.map((v) => {
                if (v.value == this.form.inputSystem) {
                  this.form.inputSystemDesc = v.text;
                }
              });

              if (result.hotelDeviceDetailList.length) {
                this.industryList = result.hotelDeviceDetailList.map((v) => ({
                  id: v.id,
                  deviceName: v.deviceName,
                  deviceImage: v.deviceImage,
                  deviceCount: v.deviceCount,
                  addTime: dayTurnTime(v.addTime),
                  addTimeDesc: formatters(v.addTime, "YY/MM/DD HH:mm:ss"),
                }));

                //取消重新存
                if (num) {
                  uni.setStorageSync("industryList", this.industryList);
                }
              }
            } else {
              this.dataFlag = "";
            }
          }
        }
      );
    },
  },
};
</script>

<style lang="scss">
.industryInformation {
  flex: 1;
  background-color: #f9f9f9;

  .content {
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    border-radius: 8rpx;
    height: calc(100vh - 92px);
    overflow-y: auto;

    .content-item {
      padding: 25rpx;
      background: #fff;

      .addFile {
        margin-top: 15rpx;
        padding: 35rpx 0;
        text-align: center;
        color: #2488f5;
        font-size: 28rpx;
        font-weight: 500;
        background: #fff;
      }
    }
  }

  .nape-item {
    display: flex;
    padding: 25rpx 20rpx 5rpx;
    background: #fff;

    .nape-left {
      position: relative;

      image {
        width: 200rpx;
        height: 200rpx;
      }

      .deleClass {
        position: absolute;
        top: -10px;
        right: -8px;
        width: 36rpx;
        height: 36rpx;
      }
    }
  }

  .u-input__content {
    width: 450rpx;
  }

  .btns {
    button {
      border-radius: 44rpx;
    }
  }
}
</style>
